
<template>
	<div>
		<a-row class="mb-2">
			<a-col span="20"> </a-col>
			<a-col span="4">
				<a-select v-if="props.config" v-model:value="props.config.viewTypeCode" style="width: 100%">
					<a-select-option value="body">body</a-select-option>
					<a-select-option value="form">form</a-select-option>
					<a-select-option value="file">file</a-select-option>
				</a-select>
			</a-col>
		</a-row>
		<a-row>
			<a-col span="24">
				<a-row v-if="props.config.viewTypeCode == 'body' || props.config.viewTypeCode == 'form'">
					<a-col span="24">
						<ParamMapping
							v-if="props.config?.body"
							:leftData="props.values"
							:rightData="props.config?.body"
						></ParamMapping>
					</a-col>
				</a-row>
				<span v-if="props.config?.viewTypeCode == 'file'">
					<TreeSelect v-if="props.config" v-model="props.config.file" :data="treeValueList" v-width="90" />
				</span>
			</a-col>
		</a-row>
	</div>
</template>
<script setup>
import { onMounted, ref, watch, toRaw, inject, getCurrentInstance } from 'vue'
import { nanoid } from 'nanoid'
import ParamMapping from '@/views/restapi/ParamMapping.vue'
import { Func } from '@/views/restapi/ParamDefineFunc.js'

const props = defineProps(['values', 'config', 'height'])
const left = ref()
const treeValueList = ref([])

watch(
	() => props.values,
	(newValue, oldValue) => {
		transferTreePrev()
	}
)

const transferTreePrev = () => {
	const cb = Func.repairJson(props.values)
	transferTree(cb.params)
	treeValueList.value = cb.params
}
onMounted(() => {
	transferTreePrev()
	// queryInput();
})

const transferTree = (list) => {
	for (let i = 0; i < list.length; i++) {
		const data = list[i]
		data.title = data.fieldName
		data.expand = false
		data.value = data.jsonPath
		data.selected = false
		data.checked = false

		if (data.children) {
			transferTree(data.children)
		}
	}
}

// const valueChange = (row, key) => {
// 	for (const c of props.config.file) {
// 		if (c.id == row.id) {
// 			c[key] = row[key]
// 		}
// 	}
// }
</script>


<style scoped></style>
